<template>
  <div class="All">
    <el-card style="border: 1px solid #ddd; margin-top: 0;">
      <el-table
          class = "d-inline-grid"
          :data="RiverTable"
          stripe
          style="width: 100%; font-size: 12px;"
          row-key="id"
          :has-n-o="false"
          :row-style="{ height: '5px' }"
          height="500"
          ref="multipleTableRef"
          border>

        <el-table-column
            label="河道名称"
            prop="rivername"
            min-width="180"
        ></el-table-column>


        <el-table-column
            label="河槽蓄水量(m3)"
            min-width="180"
        >
          <el-table-column
              v-for = "index in designheadlength"
              :label = "'水位 ' + headarray[index - 1] + ' m'"
              prop ="riverstorage"
          >
            <template v-slot="riverstorage">
              <!-- scope.row 访问当前行的数据 -->
              <span>{{riverstorage.row.riverstorage[index-1]}}</span>
            </template>
          </el-table-column>
        </el-table-column>


        <el-table-column
            label="水环境容量COD(kg/a)"
            min-width="180"
        >
          <el-table-column
              v-for = "index in designheadlength"
              :label = "'水位 ' + headarray[index - 1] + ' m'"
              prop ="codenv"
          >
            <template v-slot="codenv">
              <!-- scope.row 访问当前行的数据 -->
              <span>{{codenv.row.codenv[index-1]}}</span>
            </template>
          </el-table-column>
        </el-table-column>


          <el-table-column
              label="水环境容量NH3-N(kg/a)"
              min-width="180"
          >
            <el-table-column
                v-for = "index in designheadlength"
                :label = "'水位 ' + headarray[index - 1] + ' m'"
                prop ="codenv"
            >
              <template v-slot="nh3env">
                <!-- scope.row 访问当前行的数据 -->
                <span>{{nh3env.row.nh3env[index-1]}}</span>
              </template>
            </el-table-column>
          </el-table-column>


            <el-table-column
                label="水环境容量TP(kg/a)"
                min-width="180"
            >
              <el-table-column
                  v-for = "index in designheadlength"
                  :label = "'水位 ' + headarray[index - 1] + ' m'"
                  prop ="tpenv"
              >
                <template v-slot="tpenv">
                  <!-- scope.row 访问当前行的数据 -->
                  <span>{{tpenv.row.tpenv[index-1]}}</span>
                </template>
              </el-table-column>




        </el-table-column>

        <!--        拿到所有河道属性表表单-->
      </el-table>
    </el-card>
  </div>

</template>

<!-- ------------------------------------------------------------------------------- -->
<script setup lang="ts">
// 通过getCurrentInstance 获取
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import {ElCard, ElMessage, ElTable} from 'element-plus'
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import "ag-grid-charts-enterprise";
import {Get, Post} from "@/axios/api";

const { baseURL } = getCurrentInstance().appContext.config.globalProperties
onMounted(() => {
  console.log(baseURL) // baseURL
})

const {proxy} = getCurrentInstance()


const url=ref('/plantInfo/list')

const form = reactive({
  input: "",
  list: {},
});











const stopEditing = (params) => {
  console.log("stopEditing");
}
const startEditingCell = (params) => {
  console.log("startEditingCell");
}
const cellEditingStopped=(event) => {
  console.log("cellEditingStopped");
}





let username = ref('')


const RiverTable = ref([]);
const designheadlength = ref(0)
const headarray = ref([]); // 在循环之前定义一个变量用于存储第一次迭代的river.tpenv

function GetAllwithoutPagehelper() {
  Get("/River/RiverTable",{}).then((response) => {
    const { code, msg, data: res } = response.data;
    if (code === 200) {
      res.forEach((river,index) => {
        try{
          // 字符串转为数组
          river.codenv = JSON.parse(river.codenv);
          river.nh3env = JSON.parse(river.nh3env);
          river.tpenv = JSON.parse(river.tpenv);
          river.designhead = JSON.parse(river.designhead);
          river.riverstorage = JSON.parse(river.riverstorage);
          designheadlength.value = river.designhead.length;

          if(index === 0){
            headarray.value = river.designhead
          }
          } catch (error){
          // 如果转换失败，可以在这里处理错误，比如记录日志
          console.error('Error parsing codenv for a river:', error);
          }}
      )

      RiverTable.value=res;

      console.log(RiverTable);
      // console.log("11111111111"+headarray.value);
      ElMessage.success(msg ?? "Submitted!");
    } else {
      ElMessage.error(msg);
    }
  });
}
GetAllwithoutPagehelper();



// 映射数组，将索引转换为属性名
// const parameterMap = [
//   { label: '设计水位(m)', prop: 'designhead' },
//   { label: '水环境容量COD', prop: 'codenv' },
//   { label: '水环境容量NH3', prop: 'nh3env' },
//   { label: '水环境容量TP', prop: 'tpenv' },
// ];












const showColumnNames = ref([]);
function getColumnName() {
  // axios接口
  Get('/River/getcolumnname',{}).then((response) => {
    const { code, msg, data: res } = response.data;
    if (code === 200) {
      showColumnNames.value=res;
      console.log(showColumnNames.value)
    } else {
      ElMessage.error(msg);
    }
  });
}
getColumnName() ;



function downloadFileCsv(){
  console.log("exportExcel");
  Post('/exportExcel',{}).then((response) => {
    const { code, msg, data,rows,total: res } = response.data;
    if (code === 200) {
      console.log("下载csv");
      ElMessage.success(msg ?? "Submitted!");
    } else {
      ElMessage.error(msg);
    }
  });
}
</script>


<style scoped>
.custom-table-row-height .el-table__row {
  height: 20px; /* 自定义行高 */
}



/* 调整单元格内部垂直居中 */
.custom-table-row-height .el-table__row .cell {
  height: 30px;
  line-height: 30px;
}


.card-container {
  width: 100%;
  margin: 20px auto;
  height: auto ; /* 高度自动调整 */
  margin-bottom: 5px;
}

.el-card{
  --el-card-padding: 5px;}

.el-card-1 {
  /* 卡片整体样式 */

  border-radius: 10px; /* 增加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
  padding: 5px; /* 内边距 */
  display: flex;
  height: min-content;
  justify-content: space-around; /* 水平居中且两边按钮 */
  flex-direction: column; /* 如果希望按钮竖直排列，则取消注释这行并注释掉上一行 */
}

.example-showcase .el-loading-mask {
  z-index: 9;
}

.AllButton{
  font-size: 12px;
  padding: 10px;
  border-radius: 5px; /* 按钮圆角 */
  height: min-content;
}

.AllButton:hover {
  background-color: rgba(0, 0, 0, 0.05); /* 示例：轻微的背景色变化 */
  cursor: pointer; /* 显示指针为手型 */
}


.el-table th, .el-table td {
  font-size: 5px; /* 替换为您希望的字体大小 */
}


el-table.cell {
  font-size: 12px !important;
}
span{
  font-size: 12px;
}
.el-select__selection{
  font-size: 12px;
}
.All{
  font-size: 12px;
}
</style>